<template>
  <div id="app">
    <div class="title">目录清单审核</div>
    <div class="context">
      <el-form :inline="true" :model="ruleForm" :rules="rules" class="demo-form-inline">
        <el-row>
          <el-col :span="24">
            <el-form-item label="事项类型" label-width="120px" prop="region">
              <el-select style="width: 360px" el-select v-model="ruleForm.region" placeholder="请选择事项类型">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="顶级区划机构" prop="region" style="margin-left: 105px">
              <el-select style="width: 360px" el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="活动名称" label-width="120px" prop="name">
              <el-input v-model="ruleForm.name" style="width: 942px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="特殊资源" label-width="120px" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-button plain>国家级/局（署，会）</el-button>
                <el-button plain>省级/直属</el-button>
                <el-button plain>市级/隶属</el-button>
                <el-button plain>县级</el-button>
                <el-button plain>镇（乡，街道）级</el-button>
                <el-button plain>村（社区）级</el-button>
                <el-button plain>分级管理</el-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="是否存在子项" label-width="120px" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-button plain>是</el-button>
                <el-button plain>否</el-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否纳入国家目录" prop="resource" style="margin-left: 325px">
              <el-radio-group v-model="ruleForm.resource">
                <el-button plain>是</el-button>
                <el-button plain>否</el-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="计划生效日期" label-width="120px" prop="time1">
              <el-select style="width: 360px" el-select v-model="ruleForm.time1" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="计划取消日期" prop="time2" style="margin-left: 115px">
              <el-select style="width: 360px" el-select v-model="ruleForm.time2" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="活动形式" label-width="120px" prop="desc">
              <el-input type="textarea" style="width: 942px" v-model="ruleForm.desc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="文件上传" label-width="120px" prop="desc">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="3">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="footer">
      <div class="box">
        <div class="cancel" @click="onShow">取消</div>
        <div class="determine" @click="onShow">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        ruleForm: {
          region: '',
          name: '',
          time2: '',
          time1: '',
          desc: ''
        },
        rules: {
          region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
          name: [{ required: true, message: '请输入活动名称', trigger: 'change' }],
          resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }]
        }
      };
    },
    methods: {
      onShow() {
        this.$emit('onShow', false);
      }
    }
  };
</script>

<style lang="scss" scoped>
  #app {
    width: 94%;
    margin: auto;
    background: #fff;
    border-radius: 20px;
    .page-top {
      height: 90px;
      width: 100%;
    }
    .title {
      font-size: 24px;
      color: #222;
      font-weight: bold;
      padding: 30px 40px;
      box-sizing: border-box;
      border-bottom: 1px solid #d8dfe9;
    }
    .context {
      padding: 30px 40px;
      box-sizing: border-box;
      table,
      td {
        border: 1px solid #d8dfe9;
        border-collapse: collapse;
      }
      table {
        width: 100%;
        tr {
          .tdl {
            width: 200px;
            height: 63px;
            line-height: 63px;
            text-align: right;
            font-size: 18px;
            color: #222;
            background: #eff3f9;
          }
          .tdr {
            padding-left: 15px;
            width: 374px;
          }
        }
      }
    }
    .b-title {
      padding: 0 0 20px 40px;
      font-size: 20px;
      font-weight: bold;
      color: #222;
      padding: 30px 40px;
      box-sizing: border-box;
    }
    .footer {
      width: 100%;
      .box {
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        .cancel {
          width: 175px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          background: #d8dfe9;
          opacity: 1;
          border-radius: 5px;
          margin-right: 10px;
          cursor: pointer;
        }
        .determine {
          cursor: pointer;
          width: 175px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          background: linear-gradient(90deg, #00b9ff 0%, #1e87ff 100%);
          opacity: 1;
          border-radius: 5px;
        }
      }
    }
  }
</style>
